<template>
    <view class="container">
        <!-- @scrolltolower="scrolltolower" -->
            <view class="detail-head">
                <view class="head-top row">
                    <view class="head-info">
                        <view class="title">
                            子弹发薪
                        </view>
                        <view class="name">
                            商务负责人：{{ payInfo?.eleSignInfo?.salesName }}
                        </view>
                    </view>
                    <view :class="['head-close',payInfo?.eleSignInfo?.serviceState === 2 ? 'head-close-grey' : ''] ">
                        {{ payInfo?.eleSignInfo?.serviceState === 1 ? '已交付' : payInfo?.eleSignInfo?.serviceState === 2 ? '已关闭' : '已开通' }}
                    </view>
                </view>
                <view class="company-box">
                    <!--  -->
                    <view class="company-customer" @click="onGoContact">
                        <view>
                            关联客户：
                        </view>
                        <view class="title">
                            {{ payInfo?.eleSignInfo?.companyName }}
                            <image src="@/static/home/right-arrow.png" class="arrow-img"/>
                        </view>
                    </view>
                    <view class="company-contacts" @click="onGoCustomer">
                        <view>相关联系人：</view>
                        <view class="title">
                            <view class="contacts-list">
                                <div class="portrait-i" v-for="(item,index) in payInfo.relevantContacts" :key="index">
                                    <default-portrait :name="item.customName" url="" width="48" height="48" />
                                </div>
                            </view>
                            {{ payInfo?.relevantContacts?.length }}人
                            <image src="@/static/home/right-arrow.png" class="arrow-img"/>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 子弹发薪列表 -->
            <view >
                <view class="tab-radius">
                    <tab-radius
                        :list="['详细信息', '销售记录', '运营数据']"
                        :active="payIndex"
                        @change="onPayTab"
                        divided="100%"
                    />
                </view>
                <!-- 详细订单 -->
                <view class="record-list" v-if="payIndex === 0">
                    <view class="record-i">
                        <view class="i-info">
                            <view class="info-row row">
                                <view class="info-row-left"> 产品开通时间： </view>
                                <text class="info-row-right">{{ payInfo?.openPayTime?.productOpenTime ?? '暂无' }}</text>
                            </view>
                            <view class="info-row row">
                                <view class="info-row-left"> 最后修改负责人时间： </view>
                                <text class="info-row-right">{{ payInfo?.openPayTime?.updateSalerTime }}</text>
                            </view>
                            <view class="info-row row">
                                <view class="info-row-left"> 备注： </view>
                                <text class="info-row-right">{{ payInfo?.openPayTime?.remark ?? '——' }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 销售记录 -->
                <view class="sale-list" v-if="payIndex === 1">
                    <noData v-if="saleList.length === 0"/>
                    <view class="sale-i" v-for="(item,index) in saleList" :key="index">
                        <view class="sale-time">
                            <view class="sale-fixed-width">
                                <view class="decorate-time">
                                    <view class="decorate-within"></view>
                                </view>
                            </view>
                            <view class="time">{{ item.operationTime }}</view>
                        </view>
                        <view :class="['sale-content row', saleList.length-1 === index ? 'sale-content-active' : '']">
                            <view></view>
                            <view class="sale-content-box">
                                <view class="box">
                                    <view class="row row-i row-i-active" v-if="item.status === 3">
                                        <view>退款金额：</view>
                                        <view class="num">¥{{ item.serviceAmount }}</view>
                                    </view>
                                    <view class="row row-i row-i-active" v-if="item.status === 3">
                                        <view>退款方式：</view>
                                        <view class="num">{{ item.payMode || '暂无' }}</view>
                                    </view>
                                    <view class="row row-i row-i-active" v-if="item.status === 1">
                                        <view>销售场景：</view>
                                        <view class="num">{{ item.salesScenario  || '暂无' }}</view>
                                    </view>
                                    <view class="row row-i row-i-active" v-if="item.status === 1">
                                        <view>服务金额：</view>
                                        <view class="num">{{item.serviceAmount ?  ('￥' + item.serviceAmount) : '暂无' }}</view>
                                    </view>
                                    <view class="row row-i row-i-active" v-if="item.status === 1 && item.scenario === 0">
                                        <view>开户金额：</view>
                                        <view class="num">{{item.openAccountMoney !== null ? ('￥' +  item.openAccountMoney) : '暂无' }}</view>
                                    </view>
                                    <view class="row row-i row-i-active" v-if="item.status === 1">
                                        <view>付款方式：</view>
                                        <view class="num">{{ item.payMode || '暂无' }}</view>
                                    </view>
                                    <view class="row row-i row-i-active" v-if="item.status === 1">
                                        <view>总金额：</view>
                                        <view class="num">{{item.totalAmount !== null ? ('￥' +  item.totalAmount) : '暂无' }}</view>
                                    </view>
                                    <view class="row row-i row-i-active" v-if="item.status === 1">
                                        <view>到期时间：</view>
                                        <view class="num">{{ item.dueDate || '暂无' }}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 运营数据 -->
                <view class="operate" v-if="payIndex === 2">
                    <view class="operate-box">
                        <view class="operate-pay">
                            <view class="row">
                                <view class="title">发薪统计</view>
                                <view class="row">
                                    <poput-time noCustom="true" :list='selectTimeList' :default="timeIndex" @cancel="onCancelTime"/>
                                </view>
                            </view>
                            <view class="box-list">
                                <view class="box-i">
                                    <view class="title">
                                        发薪笔数
                                    </view>
                                    <view class="num">
                                        {{ operateInfo.payOperate.payNum}}
                                    </view>
                                </view>
                                <view class="box-i">
                                    <view class="title">
                                        发薪金额
                                    </view>
                                    <view class="num">
                                        <text class="company">￥</text>{{ operateInfo.payOperate.payMoneyCount }}
                                    </view>
                                </view>
                                <view class="box-i">
                                    <view class="title">
                                        已领薪人数
                                    </view>
                                    <view class="num">
                                        {{ operateInfo.payOperate.paidCount }}
                                    </view>
                                </view>
                                <view class="box-i">
                                    <view class="title">
                                        已领薪金额
                                    </view>
                                    <view class="num">
                                        <text class="company">￥</text>{{ operateInfo.payOperate.paidMoney }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="operate-project row">
                            <view class="title">项目统计</view>
                            <view></view>
                        </view>
                        <view class="box-list"><view class="box-i">
                                <view class="title">
                                    需打卡项目
                                </view>
                                <view class="num">
                                    {{ operateInfo.projectCount.longTimeProjectCount }}
                                </view>
                            </view>
                            <view class="box-i">
                                <view class="title">
                                    快速发薪项目
                                </view>
                                <view class="num">
                                    <text class="company"></text>{{ operateInfo.projectCount.quickProjectCount }}
                                </view>
                            </view>
                            <view class="box-i">
                                <view class="title">
                                    无打卡项目
                                </view>
                                <view class="num">
                                    {{ operateInfo.projectCount.dailyProjectCount }}
                                </view>
                            </view>
                            <view class="box-i">
                                <view class="title">
                                    pc发薪项目
                                </view>
                                <view class="num">
                                    <text class="company"></text>{{ operateInfo.projectCount.pcProjectCount }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 员工库 -->
                    <view class="chart-box">
                        <view class="chart-top row">
                            <view>
                                <componentTab :list="[{title:'领薪人数'},{title:'发薪金额'},{title:'员工库'}]" :active="tabTitle" @change="onTabTitle" />
                            </view>
                            <view class="tab-time">
                                <!-- @change="onAnalysisTab" -->
                                <tab-capsule :list="['近7天', '近30天']" :active="timeTab" @change="onTabChange" />
                            </view>
                        </view>
                        <view class="chart">
                            <qiun-data-charts
                                class="qiun-data-charts"
                                type="line"
                                :opts="optsString"
                                :chartData="chartData"
                                :inScrollView="true"
                                :reload="true"
                                :reshow="true"
                            />
                        </view>
                    </view>
                </view>
            </view>
    </view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import componentTab from '@/components/tab/tab.vue'
import defaultPortrait from '@/components/default-portrait/default-portrait.vue'
import tabCapsule from '../../../components/tab-capsule/tab-capsule.vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import noData from '@/components/no-data/no-data.vue'
import { payInfoData, paySaleData, payOperateInfo, payOperateEcharts, GetPayInfoDto, GetPaySaleDto, GetpayOperateDto, GetpayOperateEchartsDto } from '@/api/signing'
import user from '@/utils/user'
const dealId = ref()
const selectTimeList = ref(['全部', '昨天', '今天', '本周', '本月', '上月'])
const timeIndex = ref(4)
const startTime = ref('')
const endTime = ref('')
const payIndex = ref(0)
const companyId = ref()
const payInfo = ref({} as GetPayInfoDto)
const saleList = ref([] as GetPaySaleDto[])
const operateInfo = ref({} as GetpayOperateDto)
const operateEchartsInfo = ref({} as GetpayOperateEchartsDto)
const timeTab = ref(0)
const tabTitle = ref(0)
const customer = ref('pay')
const optsString = ref({
    padding: [5, 5, 5, 5],
    tooltip: { showBox: true, labelFontColor: '#ffffff' },
    dataLabel: false,
    legend: {
        show: false
    },
    xAxis: {
        disableGrid: true,
        disabled: true
    },
    yAxis: {
        disabled: true,
        dashLength: 2,
        gridType: 'solid'
    },
    extra: {
        line: {
            type: 'curve',
            width: 1
        }
    }
    // series: {
    //     show: false
    // }
})
const chartData = ref({
    categories: [] as string[] | number[],
    series: [
        {
            name: '加保人数',
            data: [] as number[] | string[]
        }
    ]
})
onLoad(async (options) => {
    console.log(options, 'options')
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    companyId.value = options.id
    dealId.value = options.dealId
    getPaySaleData()
    getPayOperateInfo()
    getPayOperateEcharts()
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
onShow(() => {
    getPayInfoData()
})
// 去关联客户
const onGoCustomer = async () => {
    uni.navigateTo({
        url: '/packageRemind/pages/related-contacts/related-contacts?dealId=' + dealId.value + '&companyId=' + companyId.value
    })
}
// // 去客户联系人
// const onGoContact = () => {
//     uni.navigateTo({
//         url: '/packageRemind/pages/customer-detail/index?id=' + companyId.value + '&customer=' + customer.value + '&dealId=' + dealId.value
//     })
// }
const getPayInfoData = async () => {
    const result = await payInfoData({
        companyId: companyId.value,
        dealId: dealId.value
    })
    payInfo.value = result
}
// 选择时间回调
const onCancelTime = async (index:{index:number, time:undefined|string}) => {
    timeIndex.value = Number(index.index)
    console.log(index, 'index')
    startTime.value = index.startTime
    endTime.value = index.endTime
    await getPayOperateInfo()
}
// 销售记录列表
const getPaySaleData = async () => {
    const result = await paySaleData({
        companyId: companyId.value
    })
    saleList.value = result
}
// 运营数据
const getPayOperateInfo = async () => {
    const result = await payOperateInfo({
        companyId: companyId.value,
        startTime: startTime.value,
        endTime: endTime.value
    })
    operateInfo.value = result
}
// 图表数据
const getPayOperateEcharts = async () => {
    const result = await payOperateEcharts({
        companyId: companyId.value,
        days: 30
    })
    operateEchartsInfo.value = result
    await setInterceptGive()
    console.log(result, 'result')
}
// 图表数据截取赋值
const setInterceptGive = () => {
    const echartsInfoData = JSON.parse(JSON.stringify(operateEchartsInfo.value))
    console.log(echartsInfoData, 'echartsInfoData')
    if (timeTab.value === 0) {
        if (tabTitle.value === 0) {
            chartData.value.series[0].data = echartsInfoData.receivePeople.splice(0, 7)
            chartData.value.categories = echartsInfoData.date.splice(0, 7)
            console.log('7-0')
        }
        if (tabTitle.value === 1) {
            chartData.value.series[0].data = echartsInfoData.salaryAmount.splice(0, 7)
            chartData.value.categories = echartsInfoData.date.splice(0, 7)
            console.log('7-1')
        }
        if (tabTitle.value === 2) {
            chartData.value.series[0].data = echartsInfoData.employees.splice(0, 7)
            chartData.value.categories = echartsInfoData.date.splice(0, 7)
            console.log('7-2')
        }
    } else {
        if (tabTitle.value === 0) {
            chartData.value.series[0].data = echartsInfoData.receivePeople
            chartData.value.categories = echartsInfoData.date
            console.log('30-0')
        }
        if (tabTitle.value === 1) {
            chartData.value.series[0].data = echartsInfoData.salaryAmount
            chartData.value.categories = echartsInfoData.date
            console.log('30-1')
        }
        if (tabTitle.value === 2) {
            chartData.value.series[0].data = echartsInfoData.employees
            chartData.value.categories = echartsInfoData.date
            console.log('30-2')
        }
        console.log('30天')
    }
    console.log(chartData.value, 'chartData')
}
// tab发薪胶囊回调
const onPayTab = async (index: number) => {
    payIndex.value = index
}
const onTabTitle = async (index:number) => {
    tabTitle.value = index
    await setInterceptGive()
}
// 切换7天或三十天
const onTabChange = async (index:number) => {
    timeTab.value = index
    await setInterceptGive()
}
</script>
<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: #fafafc;
    padding-bottom: 0;
}
.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-radius {
    margin-top: 30rpx;
    padding: 0rpx 30rpx;
}
.scroll {
    height: 100vh;
}
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;
    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
    }
    .info-row {
        display: flex;
    }
    .info-row-left {
        flex: 1;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}

// 销售记录列表
.sale-list{
    padding: 30rpx;
    .sale-i{}
    .sale-time{
        display: flex;
        align-items: center;

    }
    .sale-fixed-width{
        width: 42rpx;
    }
    .decorate-time{
        width: 29rpx;
        height: 29rpx;
        border: 2px solid #DEE0E3;
        border-radius: 50%;
        @include flex-center;
    }
    .decorate-within{
        width: 15rpx;
        height: 15rpx;
        background: #DEE0E3;
        border-radius: 50%;
    }
    .time{
        color: $black;
        font-size: $font-normal;
    }
    .sale-content{
        margin: 13rpx 0 13rpx 18rpx;
        border-left: 1rpx solid #DEE0E3;
        display: flex;
        align-items: center;
        padding-left: 25rpx;
    }
    .sale-content-active{
        border-left: none;
    }
    .sale-line{
        height: 100%;
    }
    .sale-content-box{
        padding: 25rpx 0;
        flex: 1;
        .box{
            padding: 30rpx;
            background: #ffffff;
            border-radius: 16rpx;
        }
        .row-i{
            color: $grey;
            font-size: $font-normal;
        }
        .row-i-active{
            margin-bottom: 24rpx;
        }
        .num{
            color: $black;
            font-size: $font-normal;
        }
    }
}
// 运营数据css
.operate{
    padding: 30rpx;
}
.operate-box{
    background: #ffffff;
    border-radius: 16rpx;
    padding: 39rpx 30rpx 0 30rpx;
    .title{
        color: $black;
        font-size: $font-normal;
        font-weight: bold;
    }
    .box-list{
        @include flex-between;
        flex-wrap: wrap;
        margin: 30rpx 0 30rpx 0;
    }
    .box-i{
        width: calc(100% / 2.3);
        background: #F4F4F7;
        padding: 23rpx 0 23rpx 30rpx;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }
    .title{
        color: #565868;
        font-weight: bold;
    }
    .num{
        color: $black;
        font-weight: bold;
        font-size: $font-large;
        margin-top: 10rpx;
    }
    .company{
        font-size: $font-small;
    }
}
// 员工库
.chart-box{
    background: #ffffff;
    border-radius: 16rpx;
    padding: 39rpx 30rpx;
    .chart-top{}
    .chart{
        padding: 10rpx 0;
        margin-top: 30rpx;
    }
}
.tab-time{
    flex: none;
}
.screen-i{
    border-radius: 8rpx;
    border: 1rpx solid #DEE0E3;
    padding: 12rpx 15rpx;
    color: #565868;
    font-size: $font-base;
    .drop-down{
        width: 22rpx;
        height: 20rpx;
    }
}
.screen-i-special{
    margin-left: 16rpx;
}
.contacts-list{
    margin-right: 40rpx;
}
.portrait-i{
    margin-right: -20rpx;
}
</style>
